<template>
    <div>
        <el-dialog title="物业实体信息" :visible.sync="visible" width="30%" center>
            <el-form ref="info" :model="info">
                <el-form-item label="物业实体名称">
                    <el-input style="width: 300px" v-model="info.name"></el-input>
                </el-form-item>
                <el-form-item label="物业实体简称">
                    <el-input style="width: 300px" v-model="info.alpha"></el-input>
                </el-form-item>
                <el-form-item label="所属行业类别">
                    <el-select style="width: 300px" v-model="info.type" placeholder="请选择行业">
                        <el-option label="商业楼宇" value="business"></el-option>
                        <el-option label="物业小区" value="estate"></el-option>
                        <el-option label="政府机构" value="gov"></el-option>
                        <el-option label="中小学校" value="school"></el-option>
                        <el-option label="企业园区" value="company"></el-option>
                        <el-option label="中西医院" value="hospital"></el-option>
                        <el-option label="酒店宾馆" value="hotel"></el-option>
                        <el-option label="餐饮服务" value="restaurant"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="紧急联系电话">
                    <el-input style="width: 300px" v-model="info.phone"></el-input>
                </el-form-item>
                <el-form-item label="物业实体图片">
                    <el-upload action="http://gulimall-graduate.oss-cn-shanghai.aliyuncs.com"
                               class="upload-demo"
                               :on-success="handleSuccess"
                               :before-upload="beforeUpload"
                               :before-remove="beforeRemove" :multiple="false" :file-list="info.fileList"
                               :data="dataObj" >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="dataFormSubmit()">确 定</el-button>
                <el-button @click="visible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'
    import {getUUID} from "@/utils";
    import {policy} from "../../../components/upload/policy";

    export default {
        name: "property-add-or-update",
        data() {
            return {
                visible: false,
                info: {
                    infoId: '',
                    imageUrl: '',
                    name: '',
                    alpha: '',
                    type: '',
                    phone: ''
                },
                dataObj: {
                    policy: "",
                    signature: "",
                    key: "",
                    ossaccessKeyId: "",
                    dir: "",
                    host: "",
                }
            }
        },
        methods: {
            init(id) {
                console.log(id);
                this.info.infoId = id || '';
                this.visible = true;
                this.$nextTick(() => {
                    this.$refs['info'].resetFields();
                    if (this.info.infoId) {
                        axios.get('http://gulimall.com/api/inspection/property/info', {params: {infoId: this.info.infoId}}).then(
                            response => {
                                console.log('返回响应:', response);
                                let data = response.data.data;
                                this.info.name = data.name;
                                this.info.alpha = data.alpha;
                                this.info.type = data.type;
                                this.info.phone = data.phone;
                                this.info.imageUrl = data.imageUrl;
                            },
                            error => {
                                console.log('获取物业实体属性出现错误');
                            }
                        );
                    }
                });
            },
            handleSuccess(response, file) {
                this.info.imageUrl = this.dataObj.host + "/" + this.dataObj.key.replace("${filename}", file.name);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            // 在正式将图片文件上传之前，从应用服务器获取到阿里云的服务口令，然后再将服务口令随着图片一起上传
            beforeUpload(file) {
                let _self = this;
                return new Promise((resolve, reject) => {
                    policy().then((response) => {
                        console.log("响应的数据", response);
                        _self.dataObj.policy = response.data.policy;
                        _self.dataObj.signature = response.data.signature;
                        _self.dataObj.ossaccessKeyId = response.data.accessid;
                        _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
                        _self.dataObj.dir = response.data.dir;
                        _self.dataObj.host = response.data.host;
                        console.log("响应的数据222。。。", _self.dataObj);
                        resolve(true);
                    }).catch((err) => {
                        reject(false);
                    });
                });
            },
            dataFormSubmit() {
                let params = {
                    imageUrl: this.info.imageUrl,
                    name: this.info.name,
                    alpha: this.info.alpha,
                    type: this.info.type,
                    phone: this.info.phone
                };
                console.log('infoId', this.info.infoId);
                if (this.info.infoId.length === 0) {
                    params.infoId = getUUID();
                    axios.post('http://gulimall.com/api/inspection/property/create', {
                        ...params
                    }).then(
                        response => {this.showMessage();},
                        error => {this.$message.error(error.msg);}
                    );
                } else {
                    params.infoId = this.info.infoId;
                    axios.post('http://gulimall.com/api/inspection/property/update', {
                        ...params
                    }).then(
                        response => {this.showMessage()},
                        error => {this.$message.error(error.msg)}
                    );
                }
            },
            showMessage() {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false;
                        this.$emit('refreshDataList')
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .el-form-item {
        margin-left: 50px;
    }
</style>
